import React, { Component } from 'react'
import {Route, Link, Redirect, Switch} from 'react-router-dom'
// NavLink 会在选中的路由组件上一个 active 的classname
// import {Route, Link, NavLink as Link, Redirect, Switch} from 'react-router-dom'
import { Home, Article, User } from './components'
import ArticleDetails from './components/Article/ArticleDetails'
import NotFound from './components/NotFound'
export default class routeApp extends Component {
  render() {
    return (
      <div>
        <ul>
            <li><Link to="/home">首页</Link></li>
            <li><Link to="/user">用户</Link></li>
            <li><Link to="/article">文章</Link></li>
        </ul>
        {/* <Route component={Home} path="/home"></Route>
        <Route component={Article} path="/article"></Route>
        <Route component={User} path="/user"></Route> */}
        <Switch>
            {/* 路由传参都是会在路由组件的 props 里 */}
            <Route component={Home} path="/home"></Route>
            {/* render也可以渲染路由组件，但最好不要跟component一起用，如果同时用 component优先 */}
            {/* <Route path="/home" render={() => <div>render 出来的 home</div>}></Route> */}
            {/* render可以额外传参, 但必须要把 routeprops 一起传，不然会覆盖 */}
            {/* <Route path="/home" render={(routeProps) => <Home {...routeProps} x={1} />}></Route> */}
            <Route component={Article} path="/article" exact></Route>
            {/* 二级路由，第二种，不保留导航，这里要匹配到这个子路由需要父路由加 exact 属性(半匹配)，不然匹配不到这个子路由 */}
            {/* 这个也是动态路由传参， params，  也可以用query的方式： ?id=1， 但是需要在search里取，并手动解析 */}
            <Route component={ArticleDetails} path="/article/:id"></Route>
            <Route component={User} path="/user"></Route>
            <Route component={NotFound} path="/404"></Route>
            {/* 默认定向到首页，路由多需要包裹在Switch中，做一个全匹配 */}
            {/* <Redirect to="/home" from="/"></Redirect> */}
            {/* 重定向404时，第一个需要加 exact */}
            <Redirect to="/home" from="/" exact></Redirect>
            <Redirect to="/404"></Redirect>
        </Switch>
      </div>
    )
  }
}
